<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.go(-1)" />
    <div class="box">
      <van-index-bar :index-list="indexList">
        <div v-for="(item, key) in allObj" :key="key">
          <van-index-anchor :index="key">
            <span v-if="key === '#'">当前城市</span>
            <span v-else-if="key === '热'">热门城市</span>
            <span v-else>{{ key }}</span>
          </van-index-anchor>
          <van-cell
            :title="item1.label"
            v-for="(item1, index) in item"
            :key="index"
            @click="changeArea(item1)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getArea, getHotArea } from '@/api/area'
export default {
  name: 'area-page',
  async created() {
    const res1 = await getHotArea()
    console.log(res1)
    const res2 = await getArea({ level: this.level })
    console.log(res2)
    const allObj = {
      '#': [
        JSON.parse(localStorage.getItem('city')) || {
          label: '北京',
          value: 'AREA|88cff55c-aaa4-e2e0',
          pinyin: 'beijing',
          short: 'bj'
        }
      ],
      热: res1.body,
      A: [],
      B: [],
      C: [],
      D: [],
      E: [],
      F: [],
      G: [],
      H: [],
      I: [],
      J: [],
      K: [],
      L: [],
      M: [],
      N: [],
      O: [],
      P: [],
      Q: [],
      R: [],
      S: [],
      T: [],
      U: [],
      V: [],
      W: [],
      X: [],
      Y: [],
      Z: []
    }
    res2.body.forEach((item) => {
      const key = item.short[0].toUpperCase()
      allObj[key].push(item)
    })
    for (const key in allObj) {
      if (allObj[key].length === 0) {
        delete allObj[key]
      }
    }
    this.indexList = Object.keys(allObj)
    this.allObj = allObj
    console.log(allObj)
    console.log(JSON.parse(localStorage.getItem('city')))
  },

  data() {
    return {
      level: 1,
      allObj: {},
      indexList: []
    }
  },
  computed: {},
  watch: {},

  methods: {
    changeArea(city) {
      localStorage.setItem('city', JSON.stringify(city))
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-nav-bar__title {
  font-size: 20px !important;
}
::v-deep .van-index-bar__index--active {
  background-color: #41c38d;
  color: #fff;
}

::v-deep .van-index-anchor {
  color: #ccc;
}
.box {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  .van-index-anchor {
    span {
      font-size: 20px;
    }
  }
}
::v-deep .van-index-bar__index {
  margin: 6px 0;
  padding: 0;
}
::v-deep .van-index-bar__index--active {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 4px 0 0 0;
}
</style>
